import React, { useState } from "react";
import { Tabs, Form, Input, Button, DatePicker } from "antd";

import { Outlet, useNavigate } from "react-router-dom";

function VIP() {
  const items = [
    {
      key: "/order/vip/all",
      label: "全部订单",
    },
    {
      key: "/order/vip/Payment",
      label: "待支付",
    },
    {
      key: "/order/vip/Completed",
      label: "已完成",
    },
  ];
  const nav = useNavigate();
  const onChange = (key) => {
    nav(key);
    console.log(key);
  };
  const [form] = Form.useForm();
  const [formLayout, setFormLayout] = useState("inline");
  const onFinish = (values) => {
    console.log("Success:", values);
  };
  return (
    <div style={{ width: "800px", height: "315px" }}>
      <p style={{ fontWeight: "600" }}>VIP订单</p>
      <Form
        form={form}
        style={{
          maxWidth: formLayout === "inline" ? "none" : 400,
          display: "flex",
        }}
        name="basic"
        layout={formLayout}
        onFinish={onFinish}
      >
        <Form.Item label="订单号" name="shopName" style={{marginLeft:'10px'}}>
          <Input placeholder="请输入订单号" allowClear />
        </Form.Item>
        <Form.Item
          label="日期查询"
          name="dateRange"
          style={{ width:'400px' }}
        >
          <DatePicker.RangePicker />
        </Form.Item>
        <Form.Item style={{ marginLeft: "10px" }}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
      <div>
        <Outlet></Outlet>
      </div>
    </div>
  );
}

export default VIP;
